<template>
	<view class="identity-card">
		<view class="card-margin"></view>
		<view class="card-shoot">
			<view class="shoot">
				<view class="shoot-item" @click="upload(2)">
					<view class="item-center"><u-image width="120rpx" height="120rpx" src="@/static/img/shoot.png"></u-image></view>
					<view><u-image width="334rpx" height="212rpx" :src="frontImg"></u-image></view>
					<view class="item-text">请拍摄身份证正面</view>
				</view>
				<view class="shoot-item"  @click="upload(1)">
					<view class="item-center"><u-image width="120rpx" height="120rpx" src="@/static/img/shoot.png"></u-image></view>
					<view><u-image width="334rpx" height="212rpx" :src="backImg"></u-image></view>
					<view class="item-text">请拍摄身份证反面</view>
				</view>
			</view>
		</view>
		<view class="card-base">
			<view class="base-text">身份证号码</view>
			<view class="base-input">
				<u-input v-model="idCard" type="text" disabled placeholder="请填写18位居民身份证号码" />
			</view>
		</view>
		<view class="card-operation">
			<view class="operation-text">
				<view>1.必须本人的有效身份证,基本信息保持一致;</view>
				<view>2.拍摄时请确保身份证边缘完整,字体清晰,亮度均匀;</view>
				<view>3.图片大小不得超过5M,支持jpg/jpeg/png格式。</view>
			</view>
			<view class="operation-btn" @click="submit()">信息无误，确认提交</view>
		</view>
	</view>
</template>

<script>
	
	import reverse from '../../../static/img/front.png'
	import front from '../../../static/img/reverse.png'
	
	export default {
		data () {
			return {
				agreementId: '',
				fileSign: '',
				key: '',
				idCard: '',
				frontImg: front,
				backImg: reverse,
				agreeInfo: {},
				name: ''
			}
		},
		onLoad (option) {
			this.agreementId = parseInt(option.agreementId)
		},
		mounted () {
			this.getKey()
			this.agreeInfo = this.$store.getters.getAgreeInfo
			// 判断用户进来是甲方还是乙方，有数据就显示数据
			if (this.agreeInfo.writer === 1) {
				this.idCard = this.agreeInfo.firstIdCard
				let firstIdCardUrl = this.agreeInfo.firstIdCardUrl.split(',')
				this.frontImg = firstIdCardUrl[0]
				this.backImg = firstIdCardUrl[1]
			} else {
				this.idCard = this.agreeInfo.secondIdCard
				let secondIdCardUrl = this.agreeInfo.secondIdCardUrl.split(',')
				this.frontImg = secondIdCardUrl[0]
				this.backImg = secondIdCardUrl[1]
			}
		},
		methods: {
			upload (e) {
				this.fileSign = e
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.commonApi.petAvatar,
							filePath: tempFilePaths[0],
							header: {
								token: uni.getStorageSync('token')
							},
							name: 'file',
							formData: {
								fileName: tempFilePaths[0]
							},
							success: res => {
								let img = JSON.parse(res.data)
								// 判断用户点击的是正面上传还是反面上传
								if (this.fileSign === 1) {
									this.getCard(img.data, 'front')
								} else {
									this.getCard(img.data, 'back')
								}
							},
							fail: res => {
							}
						});
				    }
				})
			},
			// 身份证验证接口
			getCard (url, cardSide) {
				uni.request({
					url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + this.key,
					method: 'POST',
					header: {
						"Content-Type": 'application/x-www-form-urlencoded;charset=UTF-8'
					},
					data: {
						url: url,
						id_card_side: cardSide
					},
					success: (res) => {
						let items = res.data
						if (items.image_status === 'reversed_side') {
							this.showToast('身份证正反面颠倒')
						} else if (items.image_status === 'non_idcard') {
							this.showToast('上传的图片中不包含身份证')
						} else if (items.image_status === 'blurred') {
							this.showToast('身份证模糊')
						} else if (items.image_status === 'other_type_card') {
							this.showToast('其他类型证照')
						} else if (items.image_status === 'over_exposure') {
							this.showToast('身份证关键字段反光或过曝')
						} else if (items.image_status === 'over_dark') {
							this.showToast('身份证欠曝（亮度过低')
						} else if (items.image_status === 'unknown') {
							this.showToast('未知状态')
						} else if (items.image_status === 'normal') {
							// 判断用户点击的是正面上传还是反面上传
							if (this.fileSign === 1) {
								this.backImg = url
								this.idCard = items.words_result.公民身份号码.words
								this.name = items.words_result.姓名.words
							} else {
								this.frontImg = url
							}
						}
					}
				})
			},
			// 获取key
			getKey () {
				this.$request(this.commonApi.key, 'GET').then(res => {
					let items = res.data
					this.key = items.data
				})
			},
			showToast (title) {
				uni.showToast({
					title: title + ',请重新上传',
					icon: 'none'
				})
			},
			// 提交
			submit () {
				if (this.frontImg === front) {
					uni.showToast({
						title: '身份证正面为空',
						icon: 'none'
					})
					return false
				}
				if (this.backImg === reverse) {
					uni.showToast({
						title: '身份证反面为空',
						icon: 'none'
					})
					return false
				}
				// 判断是否为甲方或乙方，存数据至vuex中
				if (this.agreeInfo.writer === 1) {
					this.agreeInfo.firstIdCard = this.idCard
					let firstIdCardUrl = []
					firstIdCardUrl.push(this.frontImg, this.backImg)
					this.agreeInfo.firstIdCardUrl = firstIdCardUrl.join(',')
				} else {
					this.agreeInfo.secondIdCard = this.idCard
					let secondIdCardUrl = []
					secondIdCardUrl.push(this.frontImg, this.backImg)
					this.agreeInfo.secondIdCardUrl = secondIdCardUrl.join(',')
				}
				this.$store.commit('setAgreeInfo', this.agreeInfo)
				// 存储完数据就跳回输入页面
				uni.navigateTo({
				    url: './petAgreement?agreementId=' + this.agreementId + '&fromTo=' + true + '&name=' + this.name
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.identity-card {
		.card-margin {
			width: 100%;
			height: 2rpx;
			background-color: #F6F6F6;
		}
		.card-shoot {
			padding: 60rpx 204rpx;
			background-color: #fff;
			margin-top: 12rpx;
			.shoot {
				height: 610rpx;
				width: 334rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.shoot-item {
					height: 305rpx;
					position: relative;
					.item-center {
						position: absolute;
						top: 60rpx;
						left: 117rpx;
						z-index: 10;
					}
					.item-text {
						margin-top: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
		}
		.card-base {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			background-color: #F6F6F6;
			.base-text {
				color: #333333;
			}
			.base-input {
				color: #C8C8C8;
				/deep/ .u-input__input {
					text-align: right;
					width: 338rpx!important;
				}
			}
		}
		.card-operation {
			padding: 64rpx 30rpx;
			background-color: #fff;
			.operation-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-bottom: 60rpx;
			}
			.operation-btn {
				width: 600rpx;
				height: 80rpx;
				background: #FFBB00;
				border-radius: 46rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				letter-spacing: 2rpx;
				text-align: center;
				margin-left: 46rpx;
			}
		}
	}
</style>
